<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .clip-path-triangle {
      /* width: 200px;
      height: 200px;
      background: deeppink; */

      /* 1. inset 矩形： */
      /* 场景1：将原盒子 ->宽(或高)裁剪为 inset 当前值的2倍... */
      /* clip-path: inset(50px 50px); */

      width: 200px;
      height: 100px;
      border: 10px solid;
      border-image: linear-gradient(45deg, gold, deeppink) 1;
      clip-path: inset(0 round 10px);

      /* 2.  */
      /* clip-path: circle(30px at 0 100px); */

      /* polygon：多边形 */
      /* clip-path: polygon(0 0, 100% 0, 0 100%, 0 0); */
    }
  </style>
</head>
<body>
  <div class="clip-path-triangle"></div>
</body>
</html>